今天來從Webcam.js來說說Flash這些外掛。隨著網頁與行動裝置的進化，瀏覽器要存取相機、陀螺儀等資源越來越容易，不過要處理不支援的情況還有點麻煩。Webcam.js是一個在HTML5裡取得相機無果時，會自動轉換去嘗試使用Flash獲取資源，並且提供了很多高級的API，今天就帶大家來看看吧！

首先會需要一個顯示相機畫面的元素：

<script src="webcam.js"></script>
<div id="my_camera" style="width:320px; height:240px;"></div>
<div id="my_result"></div>
<a href="javascript:void(take_snapshot())">Take Snapshot</a>

當然還是要先引入Webcam.js給的腳本webcam.js，另外還有一份webcam.sfw要置於同一目錄底下。webcam.sfw是一份Flash相關檔案，在判斷需要的時候會去請求這份檔案。另外準備一個拍照完顯示的地方，以及一個快門。

<script language="JavaScript">
    Webcam.attach( '#my_camera' );
    
    function take_snapshot() {
        Webcam.snap( function(data_uri) {
            document.getElementById('my_result').innerHTML = '<img src="'+data_uri+'"/>';
        } );
    }
</script>

用法很簡單，直接使用Webcam.attach(#element_id)，這會嘗試請求相機資源，並自動判斷顯示大小，顯示於指定元素之中(題外話，把它建立好的元素挖開來也是件蠻有趣的事情)。這有其他用法，就去參考官方文檔吧！

拍照截圖的話，直接使用Webcam.snap()，這用法更是多樣，今天也不多說了(不習慣的鍵盤真痛苦Orz)。

可以看到瀏覽器中的JS可以直接存取相機資源，甚至GPU、陀螺儀也都可以，未來搞不好藍芽也不在話下，不過在以前這些資源可都是需要而外的外掛，像是Flash來處理的。在未來Flash應該會慢慢退出瀏覽器，除了iPhone不支援以外，Chrome沒記錯明年新版本也不會支援。